<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/bill.css">

	<style>


    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
}
    </style>
    <link rel="stylesheet" href=" dist/dropload.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">	
	localStorage.userToken = "${userToken}";
	localStorage.orderType = "${orderType}";
	localStorage.stream = "${stream}";
	</script>
  </head>
  
  <body>
   <section class="bill-list">
	 	<div>
	 		<ul class="lists">
	 		 <c:forEach var="info" items="${goldHistoryList }">
	 		 <li class="">
	 				<div class="b-time">
	 					<h3>${info.YTD }</h3>
	 					<p>${info.time }</p>
	 				</div>
	 				<img src="${info.image }" alt="" class="b-mode " > <!-- 微信 固定头像 -->
	 				<div class="b-inf">
	 					<p>${info.valNum }</p>
	 					<div class="price"><span class="mode">${info.typedes }</span><span>${info.describe }</span></div>
	 				</div>
	 			</li>
	 		 </c:forEach>
<!-- 	 			<li class="fail"> -->
<!-- 	 				<div class="b-time"> -->
<!-- 	 					<h3>10-01</h3> -->
<!-- 	 					<p>19:00</p> -->
<!-- 	 				</div> -->
<!-- 	 				<img src="images/g-l-gw.png" alt="" class="b-mode " >  -->
<!-- 	 				<div class="b-inf"> -->
<!-- 	 					<p>+64.00</p> -->
<!-- 	 					<div class="price">官网-活动赠送</div> -->
<!-- 	 				</div> -->
<!-- 	 			</li> -->
<!-- 	 			<li class="fail"> -->
<!-- 	 				<div class="b-time"> -->
<!-- 	 					<h3>10-01</h3> -->
<!-- 	 					<p>19:00</p> -->
<!-- 	 				</div> -->
<!-- 	 				<img src="images/g-l-gw.png" alt="" class="b-mode " > 官网获取 固定头像 -->
<!-- 	 				<div class="b-inf"> -->
<!-- 	 					<p>+64.00</p> -->
<!-- 	 					<div class="price">官网-用户福利</div> -->
<!-- 	 				</div> -->
<!-- 	 			</li> -->
<!-- 	 			<li> -->
<!-- 	 				<div class="b-time"> -->
<!-- 	 					<h3>10-01</h3> -->
<!-- 	 					<p>19:00</p> -->
<!-- 	 				</div> -->
<!-- 	 				<img src="images/btn-ope.png" alt="" class="b-mode " >   头像 -->
<!-- 	 				<div class="b-inf"> -->
<!-- 	 					<p>+4789.64</p> -->
<!-- 	 					<div class="price">妹妹-买单消费</div> -->
<!-- 	 				</div> -->
<!-- 	 			</li> -->
<!-- 	 			<li> -->
<!-- 	 				<div class="b-time"> -->
<!-- 	 					<h3>10-01</h3> -->
<!-- 	 					<p>19:00</p> -->
<!-- 	 				</div> -->
<!-- 	 				<img src="images/btn-ope.png" alt="" class="b-mode " >   头像 -->
<!-- 	 				<div class="b-inf"> -->
<!-- 	 					<p>+4789.64</p> -->
<!-- 	 					<div class="price">妹妹妹妹妹妹妹妹-金币转账</div> -->
<!-- 	 				</div> -->
<!-- 	 			</li> -->


	 		</ul>
	 	</div>
	 </section>
  </body>
<!-- 	 <script src="dist/dropload.min.js"></script> -->
<!-- 	 <script> -->
<!-- 	 // 页数 -->
<!--     var page = 1; -->
<!--     // 每页展示10个 -->
<!--     var size = 5; -->
<!-- 	 $(function(){ -->
    
<!--     // dropload -->
<!--     $('.bill-list').dropload({ -->
<!--         scrollArea : window, -->
<!--         domUp : { -->
<!--             domClass   : 'dropload-up', -->
<!--             domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>', -->
<!--             domUpdate  : '<div class="dropload-update">↑释放更新</div>', -->
<!--             domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>' -->
<!--         }, -->
<!--         domDown : { -->
<!--             domClass   : 'dropload-down', -->
<!--             domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', -->
<!--             domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>', -->
<!--             domNoData  : '<div class="dropload-noData">没有更多信息了</div>' -->
<!--         }, -->
<!--         loadUpFn : function(me){ -->
<!--         	var mdate = { -->
<!-- 	        		"pageNow":1, -->
<!-- 	        		"pageSize":size, -->
<!-- 	        		"stream":localStorage.stream, -->
<!-- 	        		"orderType":localStorage.orderType, -->
<!-- 	        		"userId":localStorage.userToken -->
<!-- 	        	}; -->
<!--         	var result = ""; -->
<!--             $.ajax({ -->
<!--                 type: 'GET', -->
<!--                 url: 'getMygoldListJson', -->
<!--                 data:mdate, -->
<!--                 dataType: 'json', -->
<!--                 success: function(data){ -->
<!--                 	var result = ''; -->
<!--                     for(var i = 0; i < data.goldHistoryList.length; i++){ -->
<!--  					result+='<li class="">'+ -->
<!--  					        '<div class="b-time">'+ -->
<!--  					        '<h3>'+data.goldHistoryList[i].YTD+'</h3>'+ -->
<!--  					        '<p>'+data.goldHistoryList[i].time+'</p>'+ -->
<!--  					        '</div>'+ -->
<!-- 	 				        '<img src="'+data.goldHistoryList[i].image+'" alt="" class="b-mode " > '+ -->
<!-- 	 				        '<div class="b-inf">'+ -->
<!-- 	 				        '<p>'+data.goldHistoryList[i].valNum+'</p>'+ -->
<!-- 	 				        '<div class="price">'+data.goldHistoryList[i].describe+'</div>'+ -->
<!-- 	 				        '</div>'+ -->
<!-- 	 				        '</li>'; -->
<!--                     } -->
<!--                     // 为了测试，延迟1秒加载 -->
<!--                     setTimeout(function(){ -->
<!--                         $('.detail').html(result); -->
<!--                         // 每次数据加载完，必须重置 -->
<!--                         me.resetload(); -->
<!--                         // 重置页数，重新获取loadDownFn的数据 -->
<!--                         page = 1; -->
<!--                         // 解锁loadDownFn里锁定的情况 -->
<!--                         me.unlock(); -->
<!--                         me.noData(false); -->
<!--                     },1000); -->
<!--                 }, -->
<!--                 error: function(xhr, type){ -->
<!--                     alert('Ajax error!'); -->
<!--                     // 即使加载出错，也得重置 -->
<!--                     me.resetload(); -->
<!--                 } -->
<!--             }); -->
<!--         }, -->
<!--         loadDownFn : function(me){ -->
<!--             // 拼接HTML -->
<!--             var result = ''; -->
<!--             page++; -->
<!--         	var mdate = { -->
<!--         		"pageNow":page, -->
<!--         		"pageSize":size, -->
<!--         		"stream":localStorage.stream, -->
<!-- 	        	"orderType":localStorage.orderType, -->
<!-- 	        	"userId":localStorage.userToken -->
<!--         	}; -->
<!--             $.ajax({ -->
<!--                 type: 'GET', -->
<!--                 url: 'getMygoldListJson', -->
<!--                 data:mdate, -->
<!--                 dataType: 'json', -->
<!--                 success: function(data){ -->
<!--                 	var arrLen = data.goldHistoryList.length; -->
<!--                     if(arrLen > 0){ -->
<!--                     	for(var i = 0; i < data.goldHistoryList.length; i++){ -->
<!--                     		result+='<li class="">'+ -->
<!--  					        '<div class="b-time">'+ -->
<!--  					        '<h3>'+data.goldHistoryList[i].YTD+'</h3>'+ -->
<!--  					        '<p>'+data.goldHistoryList[i].time+'</p>'+ -->
<!--  					        '</div>'+ -->
<!-- 	 				        '<img src="'+data.goldHistoryList[i].image+'" alt="" class="b-mode " > '+ -->
<!-- 	 				        '<div class="b-inf">'+ -->
<!-- 	 				        '<p>'+data.goldHistoryList[i].valNum+'</p>'+ -->
<!-- 	 				        '<div class="price">'+data.goldHistoryList[i].describe+'</div>'+ -->
<!-- 	 				        '</div>'+ -->
<!-- 	 				        '</li>'; -->
<!--                     	} -->
<!--                     // 如果没有数据 -->
<!--                     }else{ -->
<!--                         // 锁定 -->
<!--                         me.lock(); -->
<!--                         // 无数据 -->
<!--                         me.noData(); -->
<!--                     } -->
<!--                     // 为了测试，延迟1秒加载 -->
<!--                     setTimeout(function(){ -->
<!--                         // 插入数据到页面，放到最后面 -->
<!--                         $('.detail').append(result); -->
<!--                         // 每次数据插入，必须重置 -->
<!--                         me.resetload(); -->
<!--                     },1000); -->
<!--                 }, -->
<!--                 error: function(xhr, type){ -->
<!--                     //alert('Ajax error!'); -->
<!--                     // 即使加载出错，也得重置 -->
<!--                     me.resetload(); -->
<!--                 } -->
<!--             }); -->
<!--         }, -->
<!--         threshold : 50 -->
<!--     }); -->

<!-- }); -->
<!-- </script> -->
</html>
<script src="dist/dropload.min.js"></script>
<script>
$(function(){
    // 页数
    var page = 1;
    // 每页展示10个
    var size = 10;

    // dropload
    $('.bill-list').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据 </div>'
        },
        loadUpFn : function(me){
        var mdate = {
        		"pageNow":1,
        		"pageSize":size,
        		"stream":localStorage.stream,
	        	"orderType":localStorage.orderType,
	        	"userId":localStorage.userToken
        	};
            $.ajax({
                type: 'GET',
                url: 'getMygoldListJson',
                dataType: 'json',
                data:mdate,
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.goldHistoryList.length; i++){ 
                     		result+='<li class="">'+ 
  					        '<div class="b-time">'+ 
 					        '<h3>'+data.goldHistoryList[i].YTD+'</h3>'+ 
  					        '<p>'+data.goldHistoryList[i].time+'</p>'+ 
  					        '</div>'+ 
 	 				        '<img src="'+data.goldHistoryList[i].image+'" alt="" class="b-mode " > '+ 
 	 				        '<div class="b-inf">'+ 
 	 				        '<p>'+data.goldHistoryList[i].valNum+'</p>'+ 
 	 				        '<div class="price"><span class="mode">'+data.goldHistoryList[i].typedes+'</span><span>'+data.goldHistoryList[i].describe+'</span></div>'+
 	 				        '</div>'+ 
 	 				        '</li>';
                    	};
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置页数，重新获取loadDownFn的数据
                        page = 1;
                        // 解锁loadDownFn里锁定的情况
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
        
            // 拼接HTML
            var result = '';
            page++;
            var mdate = {
        		"pageNow":page,
        		"pageSize":size,
        		"stream":localStorage.stream,
	        	"orderType":localStorage.orderType,
	        	"userId":localStorage.userToken
        	};
            $.ajax({
                type: 'GET',
                url: 'getMygoldListJson',
                dataType: 'json',
                 data:mdate,
                success: function(data){
                	var arrLen = data.goldHistoryList.length; 
                    if(arrLen > 0){
                     	for(var i = 0; i < data.goldHistoryList.length; i++){ 
                     		result+='<li class="">'+ 
  					        '<div class="b-time">'+ 
 					        '<h3>'+data.goldHistoryList[i].YTD+'</h3>'+ 
  					        '<p>'+data.goldHistoryList[i].time+'</p>'+ 
  					        '</div>'+ 
 	 				        '<img src="'+data.goldHistoryList[i].image+'" alt="" class="b-mode " > '+ 
 	 				        '<div class="b-inf">'+ 
 	 				        '<p>'+data.goldHistoryList[i].valNum+'</p>'+ 
 	 				        '<div class="price"><span class="mode">'+data.goldHistoryList[i].typedes+'</span><span>'+data.goldHistoryList[i].describe+'</span></div>'+
 	 				        '</div>'+ 
 	 				        '</li>';
                    	};
                    	}else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    //alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });

});
</script>
